/*
 * @Author: WangRui
 * @Date: 2019-12-07 12:22:55
 * @LastEditors: WangRui
 * @LastEditTime: 2019-12-07 17:05:04
 * @Description: 登录页面
 */
import React, { useCallback } from 'react'
import { useDispatch, useMappedState } from 'redux-react-hook'
import { Wrapper } from './style'
import { Button } from 'antd'
import { actionCreaters } from './store'

export default (props) => {
    //将需要的数据从store中映射到组件
    const mapState = useCallback(state => {
        return {
            isLogin: state.getIn(['login', 'isLogin'])
        }
    }, [])

    // 获取store中的数据
    const { isLogin } = useMappedState(mapState);
    // 从store中读取dispatch
    const dispatch = useDispatch();

    const handleClick = useCallback(() => {
        dispatch(actionCreaters.setLoginState(true))
    }, [dispatch])


    return (
        <Wrapper>
            <Button
                onClick={handleClick}
            >登录</Button>
            {
                isLogin ? <div>login</div> : <div>NoLogin</div>
            }
        </Wrapper>
    )
}
